import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { SelectItem, DynamicDialogRef, DynamicDialogConfig } from 'primeng/primeng';
import { ResourceService } from './service/resource.service';
import { flyIn } from '../../common/animation/common.animation';

@Component({
  templateUrl: './resource-detail.component.html',
  styleUrls: ['./resource-detail.component.scss'],
  providers: [ResourceService],
  animations: [flyIn]
})
export class ResourceDetailComponent implements OnInit {
  resId: number;
  sysId: number;
  resourceForm: FormGroup;
  resourceItem: any = {};
  resrouceType: SelectItem[] = new Array({ label: '系统模块', value: 1 }, { label: '菜单栏目', value: 2 }, { label: 'Tab面板', value: 3 }, { label: 'Button资源', value: 4 });
  fontIcons: SelectItem[] = new Array(
    { label: 'circle-o', value: 'fa fa-circle-o' },
    { label: 'cogs', value: 'fa fa-cogs' },
    { label: 'university', value: 'fa fa-university' },
    { label: 'database', value: 'fa fa-database' },
    { label: 'address-book-o', value: 'fa fa-address-book-o' },
    { label: 'windows', value: 'fa fa-windows' },
    { label: 'book', value: 'fa fa-book' },
    { label: 'newspaper-o', value: 'fa fa-newspaper-o' },
    { label: 'mixcloud', value: 'fa fa-mixcloud' },
    { label: 'database', value: 'fa fa-database' },
  );
  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private resourceService: ResourceService,
    private ref: DynamicDialogRef,
    private config: DynamicDialogConfig) {
    this.resId = this.config.data.id;
    this.sysId = this.config.data.sysId;
  }

  ngOnInit(): void {
    this.resourceService.showDetail(this.resId, this.sysId).subscribe(resource => {
      this.resourceItem = resource;
      this.buildForm();
    });
    this.buildForm();
  }

  cancel(){
    this.ref.close();
  }

  /**保存或更新 */
  saveUpdateResource($event) {
    let params = this.resourceForm.value;
    this.resrouceType.forEach(ele => {
      if (ele.value == this.resourceForm.value.resTypeId) {
        params['resTypeName'] = ele.label;
      }
    });
    this.resourceService.saveUpdateResource(this.resourceForm.value)
      .subscribe(data => {
        this.ref.close(data);
      });
  }

  buildForm(): void {
    this.resourceForm = this.fb.group({
      'resId': [this.resourceItem.resId],
      'resCode': [this.resourceItem.resCode],
      'resTitle': [this.resourceItem.resTitle, [Validators.required]],
      'resUrl': [this.resourceItem.resUrl],
      'resTypeId': [this.resourceItem.resTypeId],
      'displayIcon': [this.resourceItem.displayIcon],
      'seniorId': [this.resourceItem.seniorId],
      'seniorName': [this.resourceItem.seniorName],
      'sysId': [this.resourceItem.sysId]
    });

    this.resourceForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

    this.onValueChanged();
  }

  onValueChanged(data?: any) {
    if (!this.resourceForm) { return; }
    const form = this.resourceForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  formErrors = {
    'resTitle': ''
  };


  validationMessages = {
    'resTitle': {
      'required': '资源标题名称不能为空'
    }
  };

}
